വെബ്സൈറ്റ് പ്രകടനം മെച്ചപ്പെടുത്താനും ഉപയോക്തൃ അനുഭവം വർദ്ധിപ്പിക്കാനും ഡൈനാമിക് ഇമ്പോർട്ടുകൾ, വെബ്പാക്ക് കോൺഫിഗറേഷനുകൾ പോലുള്ള ജാവാസ്ക്രിപ്റ്റ് കോഡ് സ്പ്ലിറ്റിംഗ് രീതികൾ പരിചയപ്പെടുക. ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്കുള്ള ഒരു സമഗ്രമായ വഴികാട്ടി.
ജാവാസ്ക്രിപ്റ്റ് കോഡ് സ്പ്ലിറ്റിംഗ്: ഡൈനാമിക് ലോഡിംഗും പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനും
വെബ് ഡെവലപ്മെന്റിന്റെ എപ്പോഴും മാറിക്കൊണ്ടിരിക്കുന്ന ലോകത്ത്, തടസ്സമില്ലാത്തതും മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നത് വളരെ പ്രധാനമാണ്. ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളുടെ നട്ടെല്ലായ ജാവാസ്ക്രിപ്റ്റ്, പേജ് ലോഡ് സമയത്തെ കാര്യമായി സ്വാധീനിക്കാറുണ്ട്. വലിയ ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിലുകൾ പ്രാരംഭ ലോഡിംഗ് വേഗത കുറയ്ക്കുകയും, ഇത് ഉപയോക്താക്കളുടെ ഇടപഴകലിനെയും മൊത്തത്തിലുള്ള സംതൃപ്തിയെയും ബാധിക്കുകയും ചെയ്യും. ഇവിടെയാണ് കോഡ് സ്പ്ലിറ്റിംഗ് സഹായത്തിനെത്തുന്നത്. ഈ സമഗ്രമായ ഗൈഡ് ജാവാസ്ക്രിപ്റ്റ് കോഡ് സ്പ്ലിറ്റിംഗിന്റെ സങ്കീർണ്ണതകളിലേക്ക് കടന്നുചെല്ലുകയും, അതിന്റെ പ്രയോജനങ്ങൾ, വിവിധ സാങ്കേതിക വിദ്യകൾ, പ്രായോഗികമായി നടപ്പിലാക്കാനുള്ള വഴികൾ എന്നിവയെക്കുറിച്ച് വിശദീകരിക്കുകയും ചെയ്യും, പ്രത്യേകിച്ചും ഡൈനാമിക് ലോഡിംഗിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട്.
എന്താണ് കോഡ് സ്പ്ലിറ്റിംഗ്?
നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡിനെ ചെറുതും കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമായ ഭാഗങ്ങളാക്കി (chunks or bundles) വിഭജിക്കുന്ന ഒരു സാങ്കേതിക വിദ്യയാണ് കോഡ് സ്പ്ലിറ്റിംഗ്. പേജ് ആദ്യമായി ലോഡ് ചെയ്യുമ്പോൾ ഒരൊറ്റ വലിയ ജാവാസ്ക്രിപ്റ്റ് ഫയൽ ലോഡ് ചെയ്യുന്നതിനു പകരം, പ്രാരംഭ റെൻഡറിംഗിന് ആവശ്യമായ കോഡ് മാത്രം ലോഡ് ചെയ്യാനും മറ്റ് ഭാഗങ്ങളുടെ ലോഡിംഗ് അവ യഥാർത്ഥത്തിൽ ആവശ്യമുള്ളപ്പോൾ വരെ മാറ്റിവയ്ക്കാനും കോഡ് സ്പ്ലിറ്റിംഗ് സഹായിക്കുന്നു. ഈ രീതി പ്രാരംഭ ബണ്ടിലിന്റെ വലുപ്പം ഗണ്യമായി കുറയ്ക്കുകയും, പേജ് ലോഡ് സമയം വേഗത്തിലാക്കുകയും കൂടുതൽ പ്രതികരണശേഷിയുള്ള ഒരു യൂസർ ഇന്റർഫേസ് നൽകുകയും ചെയ്യുന്നു.
ഇതിനെ ഇങ്ങനെ ചിന്തിക്കുക: നിങ്ങൾ ഒരു പാക്കേജ് അയക്കുകയാണെന്ന് കരുതുക. എല്ലാം കൂടി ഒരു വലിയ പെട്ടിയിലാക്കുന്നതിന് പകരം, നിങ്ങൾ അതിനെ ചെറുതും കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമായ പെട്ടികളാക്കി മാറ്റുന്നു, ഓരോന്നിലും ബന്ധപ്പെട്ട സാധനങ്ങൾ വെക്കുന്നു. നിങ്ങൾ ഏറ്റവും പ്രധാനപ്പെട്ട പെട്ടി ആദ്യം അയയ്ക്കുകയും, ആവശ്യമനുസരിച്ച് മറ്റുള്ളവ പിന്നീട് അയയ്ക്കുകയും ചെയ്യുന്നു. കോഡ് സ്പ്ലിറ്റിംഗ് പ്രവർത്തിക്കുന്നതും ഇതിന് സമാനമായാണ്.
എന്തുകൊണ്ടാണ് കോഡ് സ്പ്ലിറ്റിംഗ് പ്രധാനപ്പെട്ടതാകുന്നത്?
കോഡ് സ്പ്ലിറ്റിംഗിന്റെ പ്രയോജനങ്ങൾ നിരവധിയാണ്, അവ നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ ഉപയോക്തൃ അനുഭവത്തെയും മൊത്തത്തിലുള്ള പ്രകടനത്തെയും നേരിട്ട് സ്വാധീനിക്കുന്നു:
- മെച്ചപ്പെട്ട പ്രാരംഭ ലോഡ് സമയം: പ്രാരംഭ ബണ്ടിലിന്റെ വലുപ്പം കുറയ്ക്കുന്നതിലൂടെ, പേജ് ഇന്ററാക്ടീവ് ആകാൻ എടുക്കുന്ന സമയം കോഡ് സ്പ്ലിറ്റിംഗ് ഗണ്യമായി വർദ്ധിപ്പിക്കുന്നു. ഉപയോക്താക്കളുടെ ശ്രദ്ധ പിടിച്ചുപറ്റുന്നതിനും ബൗൺസ് റേറ്റുകൾ കുറയ്ക്കുന്നതിനും ഇത് നിർണായകമാണ്.
- മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: വേഗതയേറിയ ലോഡ് സമയം സുഗമവും കൂടുതൽ പ്രതികരണശേഷിയുള്ളതുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നു. ആപ്ലിക്കേഷൻ കൂടുതൽ വേഗതയേറിയതും കാര്യക്ഷമവുമാണെന്ന് ഉപയോക്താക്കൾക്ക് അനുഭവപ്പെടുന്നു.
- കുറഞ്ഞ ബാൻഡ്‌വിഡ്ത്ത് ഉപയോഗം: ആവശ്യമായ കോഡ് മാത്രം ലോഡ് ചെയ്യുന്നതിലൂടെ, നെറ്റ്‌വർക്കിലൂടെ കൈമാറ്റം ചെയ്യപ്പെടുന്ന ഡാറ്റയുടെ അളവ് കോഡ് സ്പ്ലിറ്റിംഗ് കുറയ്ക്കുന്നു. പരിമിതമായ ബാൻഡ്‌വിഡ്ത്ത് ഉള്ള ഉപയോക്താക്കൾക്കും കണക്റ്റിവിറ്റി കുറഞ്ഞ സ്ഥലങ്ങളിൽ മൊബൈൽ ഉപകരണങ്ങൾ ഉപയോഗിക്കുന്നവർക്കും ഇത് വളരെ പ്രധാനമാണ്.
- മെച്ചപ്പെട്ട കാഷെ ഉപയോഗം: കോഡ് ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങൾ കൂടുതൽ ഫലപ്രദമായി കാഷെ ചെയ്യാൻ ബ്രൗസറുകളെ അനുവദിക്കുന്നു. ഉപയോക്താക്കൾ വിവിധ ഭാഗങ്ങളിലേക്കോ പേജുകളിലേക്കോ പോകുമ്പോൾ, ആവശ്യമായ കോഡ് മാത്രം ഡൗൺലോഡ് ചെയ്താൽ മതി, കാരണം മറ്റ് ഭാഗങ്ങൾ ഇതിനകം കാഷെ ചെയ്തിട്ടുണ്ടാകാം. ഒരു ആഗോള ഇ-കൊമേഴ്‌സ് സൈറ്റ് സങ്കൽപ്പിക്കുക; യൂറോപ്പിലെ ഉപയോക്താക്കൾ ഏഷ്യയിലെ ഉപയോക്താക്കളേക്കാൾ വ്യത്യസ്തമായ ഉൽപ്പന്ന കാറ്റലോഗുകളുമായി ഇടപഴകിയേക്കാം. പ്രസക്തമായ കാറ്റലോഗ് കോഡ് മാത്രം തുടക്കത്തിൽ ഡൗൺലോഡ് ചെയ്യുന്നുവെന്ന് കോഡ് സ്പ്ലിറ്റിംഗ് ഉറപ്പാക്കുന്നു, ഇത് രണ്ട് ഉപയോക്തൃ ഗ്രൂപ്പുകൾക്കും ബാൻഡ്‌വിഡ്ത്ത് ഒപ്റ്റിമൈസ് ചെയ്യുന്നു.
- മൊബൈലിനായി ഒപ്റ്റിമൈസ് ചെയ്തത്: മൊബൈൽ-ഫസ്റ്റ് കാലഘട്ടത്തിൽ, പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് നിർണായകമാണ്. മൊബൈൽ അസറ്റുകളുടെ വലുപ്പം കുറയ്ക്കുന്നതിലും വേഗത കുറഞ്ഞ നെറ്റ്‌വർക്കുകളിൽ പോലും മൊബൈൽ ഉപകരണങ്ങളിലെ ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നതിലും കോഡ് സ്പ്ലിറ്റിംഗ് ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു.
കോഡ് സ്പ്ലിറ്റിംഗിന്റെ തരങ്ങൾ
പ്രധാനമായും രണ്ട് തരം കോഡ് സ്പ്ലിറ്റിംഗ് ഉണ്ട്:
- കമ്പോണന്റ്-ബേസ്ഡ് സ്പ്ലിറ്റിംഗ്: നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ ഓരോ കമ്പോണന്റുകളെയോ മൊഡ്യൂളുകളെയോ അടിസ്ഥാനമാക്കി കോഡ് വിഭജിക്കുന്നു. വലുതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകൾക്ക് ഇത് പലപ്പോഴും ഏറ്റവും ഫലപ്രദമായ മാർഗ്ഗമാണ്.
- റൂട്ട്-ബേസ്ഡ് സ്പ്ലിറ്റിംഗ്: നിങ്ങളുടെ ആപ്ലിക്കേഷനിലെ വിവിധ റൂട്ടുകളെയോ പേജുകളെയോ അടിസ്ഥാനമാക്കി കോഡ് വിഭജിക്കുന്നു. നിലവിലെ റൂട്ടിന് ആവശ്യമായ കോഡ് മാത്രം ലോഡ് ചെയ്യുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കാനുള്ള സാങ്കേതിക വിദ്യകൾ
ജാവാസ്ക്രിപ്റ്റ് ആപ്ലിക്കേഷനുകളിൽ കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കാൻ നിരവധി സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കാം:
- ഡൈനാമിക് ഇമ്പോർട്ടുകൾ (
import()):കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കുന്നതിനുള്ള ഏറ്റവും ആധുനികവും ശുപാർശ ചെയ്യപ്പെടുന്നതുമായ മാർഗ്ഗമാണ് ഡൈനാമിക് ഇമ്പോർട്ടുകൾ. റൺടൈമിൽ ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂളുകൾ അസിൻക്രണസ് ആയി ലോഡ് ചെയ്യാൻ ഇവ നിങ്ങളെ അനുവദിക്കുന്നു, കോഡ് എപ്പോൾ, എങ്ങനെ ലോഡ് ചെയ്യണം എന്നതിൽ സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു.
ഉദാഹരണം:
// മുമ്പ്: // import MyComponent from './MyComponent'; // ശേഷം (ഡൈനാമിക് ഇമ്പോർട്ട്): async function loadMyComponent() { const { default: MyComponent } = await import('./MyComponent'); // MyComponent ഇവിടെ ഉപയോഗിക്കുക } // നിങ്ങൾക്ക് കമ്പോണന്റ് ആവശ്യമുള്ളപ്പോൾ ഫംഗ്ഷൻ വിളിക്കുക loadMyComponent();ഈ ഉദാഹരണത്തിൽ,
loadMyComponent()ഫംഗ്ഷൻ വിളിക്കുമ്പോൾ മാത്രമാണ്MyComponentമൊഡ്യൂൾ ലോഡ് ചെയ്യപ്പെടുന്നത്. ഇത് ഒരു ഉപയോക്താവിന്റെ ഇടപെടൽ, റൂട്ട് മാറ്റം, അല്ലെങ്കിൽ മറ്റേതെങ്കിലും ഇവന്റ് വഴി പ്രവർത്തനക്ഷമമാക്കാം.ഡൈനാമിക് ഇമ്പോർട്ടുകളുടെ പ്രയോജനങ്ങൾ:
- അസിൻക്രണസ് ലോഡിംഗ്: മെയിൻ ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യാതെ മൊഡ്യൂളുകൾ പശ്ചാത്തലത്തിൽ ലോഡ് ചെയ്യപ്പെടുന്നു.
- വ്യവസ്ഥകൾക്കനുസരിച്ചുള്ള ലോഡിംഗ്: പ്രത്യേക വ്യവസ്ഥകളോ ഉപയോക്താക്കളുടെ ഇടപെടലുകളോ അടിസ്ഥാനമാക്കി മൊഡ്യൂളുകൾ ലോഡ് ചെയ്യാം.
- ബണ്ട്ലറുകളുമായുള്ള സംയോജനം: മിക്ക ആധുനിക ബണ്ട്ലറുകളും (വെബ്പാക്ക്, പാർസൽ പോലുള്ളവ) ഡൈനാമിക് ഇമ്പോർട്ടുകളെ പിന്തുണയ്ക്കുന്നു.
- വെബ്പാക്ക് കോൺഫിഗറേഷൻ:
ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് മൊഡ്യൂൾ ബണ്ട്ലറായ വെബ്പാക്ക്, കോഡ് സ്പ്ലിറ്റിംഗിനായി ശക്തമായ സവിശേഷതകൾ നൽകുന്നു. എൻട്രി പോയിന്റുകൾ, മൊഡ്യൂൾ വലുപ്പം, ഡിപൻഡൻസികൾ തുടങ്ങിയ വിവിധ മാനദണ്ഡങ്ങളെ അടിസ്ഥാനമാക്കി നിങ്ങളുടെ കോഡ് സ്വയമേവ വിഭജിക്കാൻ വെബ്പാക്ക് കോൺഫിഗർ ചെയ്യാൻ കഴിയും.
വെബ്പാക്കിന്റെ
splitChunksകോൺഫിഗറേഷൻ ഓപ്ഷൻ:വെബ്പാക്കിൽ കോഡ് സ്പ്ലിറ്റിംഗിനുള്ള പ്രാഥമിക സംവിധാനമാണിത്. പങ്കിട്ട ഡിപൻഡൻസികളോ മൊഡ്യൂൾ വലുപ്പമോ അടിസ്ഥാനമാക്കി പ്രത്യേക ചങ്കുകൾ ഉണ്ടാക്കുന്നതിനുള്ള നിയമങ്ങൾ നിർവചിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
ഉദാഹരണം (webpack.config.js):
module.exports = { // ... മറ്റ് വെബ്പാക്ക് കോൺഫിഗറേഷനുകൾ optimization: { splitChunks: { chunks: 'all', // എല്ലാ ചങ്കുകളും വിഭജിക്കുക (async, initial) cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, // node_modules-ൽ നിന്നുള്ള മൊഡ്യൂളുകൾ കണ്ടെത്തുക name: 'vendors', // ഉണ്ടാകുന്ന ചങ്കിന്റെ പേര് chunks: 'all', }, }, }, }, };ഈ ഉദാഹരണത്തിൽ,
node_modulesഡയറക്ടറിയിൽ നിന്നുള്ള എല്ലാ മൊഡ്യൂളുകളും അടങ്ങുന്നvendorsഎന്ന പേരിൽ ഒരു പ്രത്യേക ചങ്ക് ഉണ്ടാക്കാൻ വെബ്പാക്ക് കോൺഫിഗർ ചെയ്തിരിക്കുന്നു. തേർഡ്-പാർട്ടി ലൈബ്രറികളെ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കോഡിൽ നിന്ന് വേർതിരിക്കുന്നതിനുള്ള ഒരു സാധാരണ രീതിയാണിത്, ഇത് ബ്രൗസറുകൾക്ക് അവയെ വെവ്വേറെ കാഷെ ചെയ്യാൻ അനുവദിക്കുന്നു.splitChunks-നുള്ള കോൺഫിഗറേഷൻ ഓപ്ഷനുകൾ:chunks: ഏതൊക്കെ ചങ്കുകളാണ് വിഭജിക്കേണ്ടതെന്ന് വ്യക്തമാക്കുന്നു ('all','async', അല്ലെങ്കിൽ'initial').minSize: ഒരു ചങ്ക് ഉണ്ടാക്കുന്നതിനുള്ള ഏറ്റവും കുറഞ്ഞ വലുപ്പം (ബൈറ്റിൽ) സജ്ജമാക്കുന്നു.maxSize: ഒരു ചങ്കിന്റെ പരമാവധി വലുപ്പം (ബൈറ്റിൽ) സജ്ജമാക്കുന്നു.minChunks: ഒരു മൊഡ്യൂൾ വിഭജിക്കുന്നതിന് മുമ്പ് എത്ര ചങ്കുകൾ അത് പങ്കിടണമെന്ന് വ്യക്തമാക്കുന്നു.maxAsyncRequests: ഓൺ-ഡിമാൻഡ് ലോഡിംഗിൽ സമാന്തര അഭ്യർത്ഥനകളുടെ എണ്ണം പരിമിതപ്പെടുത്തുന്നു.maxInitialRequests: ഒരു എൻട്രി പോയിന്റിലെ സമാന്തര അഭ്യർത്ഥനകളുടെ എണ്ണം പരിമിതപ്പെടുത്തുന്നു.automaticNameDelimiter: വിഭജിച്ച ചങ്കുകൾക്ക് പേരുകൾ ഉണ്ടാക്കാൻ ഉപയോഗിക്കുന്ന ഡിലിമിറ്റർ.name: വിഭജിച്ച ചങ്കിന്റെ പേര് ഉണ്ടാക്കുന്ന ഒരു ഫംഗ്ഷൻ.cacheGroups: വിവിധ മാനദണ്ഡങ്ങളെ അടിസ്ഥാനമാക്കി (ഉദാഹരണത്തിന്, വെണ്ടർ ലൈബ്രറികൾ, പങ്കിട്ട കമ്പോണന്റുകൾ) പ്രത്യേക ചങ്കുകൾ ഉണ്ടാക്കുന്നതിനുള്ള നിയമങ്ങൾ നിർവചിക്കുന്നു. ഇതാണ് ഏറ്റവും ശക്തവും വഴക്കമുള്ളതുമായ ഓപ്ഷൻ.
വെബ്പാക്ക് കോൺഫിഗറേഷന്റെ പ്രയോജനങ്ങൾ:
- ഓട്ടോമാറ്റിക് കോഡ് സ്പ്ലിറ്റിംഗ്: മുൻകൂട്ടി നിശ്ചയിച്ച നിയമങ്ങളെ അടിസ്ഥാനമാക്കി വെബ്പാക്കിന് നിങ്ങളുടെ കോഡ് സ്വയമേവ വിഭജിക്കാൻ കഴിയും.
- സൂക്ഷ്മമായ നിയന്ത്രണം: വിവിധ കോൺഫിഗറേഷൻ ഓപ്ഷനുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് വിഭജന പ്രക്രിയയെ സൂക്ഷ്മമായി ക്രമീകരിക്കാൻ കഴിയും.
- മറ്റ് വെബ്പാക്ക് സവിശേഷതകളുമായുള്ള സംയോജനം: കോഡ് സ്പ്ലിറ്റിംഗ് മറ്റ് വെബ്പാക്ക് സവിശേഷതകളായ ട്രീ ഷേക്കിംഗ്, മിനിഫിക്കേഷൻ എന്നിവയുമായി തടസ്സമില്ലാതെ പ്രവർത്തിക്കുന്നു.
- React.lazy, Suspense (റിയാക്ട് ആപ്ലിക്കേഷനുകൾക്ക്):
നിങ്ങൾ ഒരു റിയാക്ട് ആപ്ലിക്കേഷനാണ് നിർമ്മിക്കുന്നതെങ്കിൽ, കോഡ് സ്പ്ലിറ്റിംഗ് എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ
React.lazy,Suspenseഎന്നീ കമ്പോണന്റുകൾ ഉപയോഗിക്കാം.React.lazyറിയാക്ട് കമ്പോണന്റുകൾ ഡൈനാമിക് ആയി ഇമ്പോർട്ട് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു, കൂടാതെ കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ ഒരു ഫാൾബാക്ക് UI (ഉദാഹരണത്തിന്, ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ) പ്രദർശിപ്പിക്കാൻSuspenseഒരു മാർഗ്ഗം നൽകുന്നു.ഉദാഹരണം:
import React, { Suspense } from 'react'; const MyComponent = React.lazy(() => import('./MyComponent')); function MyPage() { return (Loading...
ഈ ഉദാഹരണത്തിൽ, MyComponent എന്ന കമ്പോണന്റ് React.lazy ഉപയോഗിച്ച് ഡൈനാമിക് ആയി ലോഡ് ചെയ്യുന്നു. കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ Suspense കമ്പോണന്റ് ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ പ്രദർശിപ്പിക്കുന്നു.
React.lazy, Suspense എന്നിവയുടെ പ്രയോജനങ്ങൾ:
- ലളിതവും വ്യക്തവുമായ സിന്റാക്സ്: കുറഞ്ഞ കോഡ് മാറ്റങ്ങളോടെ കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കാം.
- റിയാക്ടുമായി തടസ്സമില്ലാത്ത സംയോജനം:
React.lazy,Suspenseഎന്നിവ റിയാക്ടിൽ തന്നെയുള്ള സവിശേഷതകളാണ്. - മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ ഉപയോക്താക്കൾക്ക് ഒരു ശൂന്യമായ സ്ക്രീൻ കാണുന്നത് തടയാൻ
Suspenseകമ്പോണന്റ് ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ പ്രദർശിപ്പിക്കാൻ സഹായിക്കുന്നു.
ഡൈനാമിക് ലോഡിംഗും സ്റ്റാറ്റിക് ലോഡിംഗും
കോഡ് എപ്പോൾ ലോഡ് ചെയ്യുന്നു എന്നതിലാണ് ഡൈനാമിക്, സ്റ്റാറ്റിക് ലോഡിംഗ് തമ്മിലുള്ള പ്രധാന വ്യത്യാസം:
- സ്റ്റാറ്റിക് ലോഡിംഗ്: എല്ലാ ജാവാസ്ക്രിപ്റ്റ് കോഡും പ്രാരംഭ ബണ്ടിലിൽ ഉൾപ്പെടുത്തുകയും പേജ് ആദ്യം ലോഡ് ചെയ്യുമ്പോൾ ലോഡ് ചെയ്യുകയും ചെയ്യുന്നു. ഇത് പ്രാരംഭ ലോഡ് സമയം വർദ്ധിപ്പിക്കാൻ ഇടയാക്കും, പ്രത്യേകിച്ച് വലിയ ആപ്ലിക്കേഷനുകളിൽ.
- ഡൈനാമിക് ലോഡിംഗ്: കോഡ് ആവശ്യമുള്ളപ്പോൾ മാത്രം ആവശ്യാനുസരണം ലോഡ് ചെയ്യുന്നു. ഇത് പ്രാരംഭ ബണ്ടിലിന്റെ വലുപ്പം കുറയ്ക്കുകയും പ്രാരംഭ ലോഡ് സമയം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് സാധാരണയായി ഡൈനാമിക് ലോഡിംഗ് ആണ് തിരഞ്ഞെടുക്കുന്നത്, കാരണം ഇത് തുടക്കത്തിൽ ആവശ്യമായ കോഡ് മാത്രം ലോഡ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾക്കും (SPAs) നിരവധി സവിശേഷതകളുള്ള സങ്കീർണ്ണമായ വെബ് ആപ്ലിക്കേഷനുകൾക്കും ഇത് വളരെ പ്രധാനമാണ്.
കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കൽ: ഒരു പ്രായോഗിക ഉദാഹരണം (റിയാക്ടും വെബ്പാക്കും)
വെബ്പാക്ക് ഉപയോഗിച്ച് ഒരു റിയാക്ട് ആപ്ലിക്കേഷനിൽ കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കുന്നതിനുള്ള ഒരു പ്രായോഗിക ഉദാഹരണം നോക്കാം.
- പ്രോജക്റ്റ് സജ്ജീകരണം:
Create React App അല്ലെങ്കിൽ നിങ്ങൾക്കിഷ്ടമുള്ള സജ്ജീകരണം ഉപയോഗിച്ച് ഒരു പുതിയ റിയാക്ട് പ്രോജക്റ്റ് ഉണ്ടാക്കുക.
- ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുക:
നിങ്ങളുടെ ഡെവലപ്മെന്റ് ഡിപൻഡൻസികളായി
webpack,webpack-cliഎന്നിവ ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.npm install --save-dev webpack webpack-cli - കമ്പോണന്റ് ഘടന:
ഡൈനാമിക് ആയി ലോഡ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഒന്നോ അതിലധികമോ കമ്പോണന്റുകൾ ഉൾപ്പെടെ കുറച്ച് റിയാക്ട് കമ്പോണന്റുകൾ ഉണ്ടാക്കുക. ഉദാഹരണത്തിന്:
// MyComponent.js import React from 'react'; function MyComponent() { returnThis is MyComponent!; } export default MyComponent; - React.lazy, Suspense ഉപയോഗിച്ച് ഡൈനാമിക് ഇമ്പോർട്ട്:
നിങ്ങളുടെ പ്രധാന ആപ്ലിക്കേഷൻ കമ്പോണന്റിൽ (ഉദാഹരണത്തിന്,
App.js),MyComponentഡൈനാമിക് ആയി ഇമ്പോർട്ട് ചെയ്യാൻReact.lazyഉപയോഗിക്കുക:// App.js import React, { Suspense } from 'react'; const MyComponent = React.lazy(() => import('./MyComponent')); function App() { return (}>My App
Loading MyComponent...